<template>
  <div class="proxy-box-1">
    <div class="proxy-comm-box full-flex mr-20">
      <div class="title">
        动态住宅代理
        <div class="btns">
          <a href="https://t.me/IPXProxyService" target="_blank" class="a-btn">客服充值</a>
          <a href="javascript:void(0);" class="a-btn" @click="toBuy()">动态套餐</a>
        </div>
      </div>
      <div class="tc-main">
        <div class="item">
          <img src="@/assets/houtai_2_03.png" alt="" class="image" />
          <div class="info">
            <p>
              <span>{{ formatTraffic(getUserInfo.traffic).traffic }}</span> {{ formatTraffic(getUserInfo.traffic).unit }}
            </p>
            <p>剩余流量</p>
          </div>
        </div>
        <div class="item">
          <img src="@/assets/houtai_2_05.png" alt="" class="image" />
          <div class="info">
            <p>
              <span>{{ formatTraffic(getUserInfo.total_traffic).traffic }}</span> {{ formatTraffic(getUserInfo.total_traffic).unit }}
            </p>
            <p>累计充值流量</p>
          </div>
        </div>
        <div class="item">
          <img src="@/assets/houtai_2_07.png" alt="" class="image" />
          <div class="info">
            <p>
              <span>{{ formatTraffic(getUserInfo.consume_traffic).traffic }}</span> {{ formatTraffic(getUserInfo.consume_traffic).unit }}
            </p>
            <p>累计消耗流量</p>
          </div>
        </div>
      </div>
      <div class="ctrl-box">
        <a href="javascript:void(0);" class="cb-btn" @click="toRotatingResidential('1')">生成记录</a>
        <a href="javascript:void(0);" class="cb-btn" @click="toRechargeDetails('1')">购买记录</a>
      </div>
    </div>
    <div class="proxy-comm-box proxy-right">
      <div class="pr-user-info">
        <img src="@/assets/ipx-proxy_user-01.png" class="ui-img" />
        <div class="ui-main">
          <p class="welcome">欢迎！</p>
          <p class="name">{{ getUserInfo.email }}</p>
        </div>
        <a href="javascript:void(0);" class="change-pwd-btn" @click="toPersonal()">修改</a>
      </div>
      <div class="pr-user-tips">
        <p class="p1">TIPS:为保证账号安全，请妥善保护您账号密码</p>
        <p class="p2">IPXproxy的所有产品需在中国大陆以外的网络环境下使用</p>
      </div>
    </div>
  </div>

  <div class="proxy-box-1">
    <div class="proxy-comm-box full-flex mr-20">
      <div class="title">
        静态住宅代理
        <div class="btns">
          <a href="javascript:void(0);" class="a-btn" @click="toStaticResidential('1')">静态套餐</a>
        </div>
      </div>
      <div class="tc-main">
        <div class="item bg-ip">
          <img src="@/assets/houtai_06_1.png" alt="" class="image" />
          <div class="info">
            <p><span>{{ getUserInfo.static_proxy?.valid_count }}</span> 个</p>
            <p>可用代理</p>
          </div>
        </div>
        <div class="item bg-ip">
          <img src="@/assets/houtai_06_2.png" alt="" class="image" />
          <div class="info">
            <p><span>{{ getUserInfo.static_proxy?.soon_expire_count }}</span> 个</p>
            <p>即将过期代理</p>
          </div>
        </div>
      </div>
      <div class="ctrl-box">
        <a href="javascript:void(0);" class="cb-btn" @click="toStaticResidential('2')">到期续费</a>
        <a href="javascript:void(0);" class="cb-btn" @click="toRechargeDetails('2')">购买记录</a>
      </div>
    </div>
    <el-carousel class="proxy-right-carousel">
      <el-carousel-item>
        <div class="prc-item">
          <a href="https://admin.n69.club/register?code=dfde2e" target="_blank">
            <img src="@/assets/banner/zh-cn.png" alt="" class="image" />
          </a>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>

  <div class="proxy-box-1">
    <div class="proxy-comm-box full-flex">
      <div class="title">常见问题</div>
      <div class="question-wrap">
        <el-collapse v-model="currentActive" accordion class="question-list">
          <el-collapse-item title="你们支持免费测试吗？" name="1">
            <template #title>
              <h6 class="question-list-title">
                <strong>你们支持免费测试吗？</strong>
                <i class="el-icon el-icon-plus"><Plus /></i>
                <i class="el-icon el-icon-minus"><Minus /></i>
              </h6>
            </template>
            <div>为了防止IP滥用，IPXProxy的住宅代理目前不提供任何免费测试服务。</div>
          </el-collapse-item>
          <el-collapse-item title="一条线路可以连接多少设备？" name="3">
            <template #title>
              <h6 class="question-list-title">
                <strong>一条线路可以连接多少设备？</strong>
                <i class="el-icon el-icon-plus"><Plus /></i>
                <i class="el-icon el-icon-minus"><Minus /></i>
              </h6>
            </template>
            <div>IPXProxy不会对使用并发做限制，但一条线路的宽带是有限的，连接太多设备可能会造成网络不稳定。</div>
          </el-collapse-item>
          <el-collapse-item title="你们的代理总共支持哪些协议？" name="5">
            <template #title>
              <h6 class="question-list-title">
                <strong>你们的代理总共支持哪些协议？</strong>
                <i class="el-icon el-icon-plus"><Plus /></i>
                <i class="el-icon el-icon-minus"><Minus /></i>
              </h6>
            </template>
            <div>支持 HTTP(s) / SOCKS5 协议，在进行代理工作时，设置好请求的协议直接代理即可。</div>
          </el-collapse-item>
        </el-collapse>
        <el-collapse v-model="currentActive" accordion class="question-list">
          <el-collapse-item title="动态IP的粘性是什么意思？" name="2">
            <template #title>
              <h6 class="question-list-title">
                <strong>动态IP的粘性是什么意思？</strong>
                <i class="el-icon el-icon-plus"><Plus /></i>
                <i class="el-icon el-icon-minus"><Minus /></i>
              </h6>
            </template>
            <div>只要当前IP不失效，会一直保持不变， 在当前的IP失效后，会自动进行切换</div>
          </el-collapse-item>
          <el-collapse-item title="静态线路暂时停用可以延长使用周期吗？" name="4">
            <template #title>
              <h6 class="question-list-title">
                <strong>静态线路暂时停用可以延长使用周期吗？</strong>
                <i class="el-icon el-icon-plus"><Plus /></i>
                <i class="el-icon el-icon-minus"><Minus /></i>
              </h6>
            </template>
            <div>不可以，停用操作只是临时限制线路/端口使用，并不能延长静态线路/端口的过期时间。</div>
          </el-collapse-item>
          <el-collapse-item title="线路显示流量不足怎么办？" name="6">
            <template #title>
              <h6 class="question-list-title">
                <strong>线路显示流量不足怎么办？</strong>
                <i class="el-icon el-icon-plus"><Plus /></i>
                <i class="el-icon el-icon-minus"><Minus /></i>
              </h6>
            </template>
            <div>如果您的动态流量包流量用完了，当前使用的动态IP连接端口会被标记为流量不足，并且暂停使用， 您可以通过订购流量包补充流量。</div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch, nextTick } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '@/store/modules/user';
  import { formatTraffic } from '@/utils/index';
  import { Plus, Minus } from '@element-plus/icons-vue';

  const route = useRoute();
  const router = useRouter();
  const userStore = useUserStore();

  const getUserInfo = computed(() => {
    let userInfo = userStore.getUserInfo || {};
    return userInfo;
  });

  const props = defineProps<{
    data: Array;
  }>();

  const emits = defineEmits<{
    (event: 'confirm'): void;
  }>();

  const currentActive = ref('');

  const toBuy = () => {
    router.push({
      path: '/center/buy',
      query: {
        t: new Date().getTime(),
      },
    });
  };

  const toProxy = () => {
    router.push({
      path: '/center/proxy',
      query: {
        t: new Date().getTime(),
      },
    });
  };

  const toRecord = (name) => {
    router.push({
      path: '/center/record',
      query: {
        name,
        t: new Date().getTime(),
      },
    });
  };

  const toPersonal = () => {
    router.push({
      path: '/user/personal',
      query: {
        t: new Date().getTime(),
      },
    });
  };

  const toRotatingResidential = (name) => {
    router.push({
      path: '/center/rotatingResidential',
      query: {
        name,
        t: new Date().getTime(),
      },
    });
  };

  const toStaticResidential = (name) => {
    router.push({
      path: '/center/staticResidential',
      query: {
        name,
        t: new Date().getTime(),
      },
    });
  };

  const toRechargeDetails = (name) => {
    router.push({
      path: '/center/rechargeDetails',
      query: {
        name,
        t: new Date().getTime(),
      },
    });
  };

  const openSoonExpireMessage = (count) => {
    if (!count) return;
    ElMessageBox.alert(
      `<div style="padding:8px 0;"><p>您有<strong style="padding:0 2px; font-size:18px; color:#fa1801;">${count || 0}</strong>条静态住宅订单信息即将到期，代理过期后不支持续费，为了不影响业务的正常使用，如需续费请前往<span style="color:#157cfb">代理管理>静态住宅>已购线路</span>进行续费。</p><p>祝一切顺利！</p></div>`,
      '尊敬的用户',
      {
        type: 'warning',
        dangerouslyUseHTMLString: true,
        showCancelButton: false,
        showConfirmButton: true,
        cancelButtonText: '关闭',
        confirmButtonText: '立即前往',
        buttonSize: 'large'
      },
    ).then(() => {
      router.push({
        path: '/center/staticResidential',
        query: {
          name: '2',
          status: '2',
          t: new Date().getTime(),
        },
      });
    })
  }

  onMounted(() => {
    nextTick(() => {
      let userInfo = userStore.getUserInfo || {};
      openSoonExpireMessage(userInfo.static_proxy?.soon_expire_count);
    })
  });
</script>

<style scoped lang="scss"></style>
